<template>
  <div class="Ele">
    <div class="head">
      <input
        type="checkbox"
        class="all"
        :class="{ someChecked: Length > 0 }"
        :checked="checkedAll"
        @click="$emit('changeAllCk',list[0].positin,checkedAll)"
      />
      <div>
        <span>全选</span>
        <span class="num">{{Length+'/'+list.length}}</span>
      </div>
    </div>
    <ul>
      <li :key="item.id" v-for="item in list">
        <input
          type="checkbox"
          @change="$emit('changeChecked', item.id)"
          :id="'checkbox' + item.id"
          :disabled="item.disabled"
          :checked="item.checked"
        />
        <label :for="'checkbox' + item.id">{{ item.text + item.id }}</label>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["list"],
  data() {
    return {};
  },
  methods: {
    log1(){
      console.log(this.checkedAll);
    }
  },

  computed: {
    // 计算左，右元素的长度，当一个元素或以上被选中按钮才能使用
    Length() {
      return this.list.filter((v) => v.checked === true).length ;
    },

    // 全选按钮 当被选中的元素个数等于总数组长度-被禁用的数据长度，则全选框被选中
    checkedAll() {
      return this.list.filter((v) => v.checked).length ===this.list.filter((v) => !v.disabled).length
    },
  },
};
</script>

<style scoped >
.Ele {
  width: 150px;
  min-height: 240px;
  background-color: #f0f8ff;
  margin: 10px;
  font-size: 16px;
}

input {
  margin-right: 10px;
}

ul {
  padding-left: 20px;
  list-style: none;
  /* width: 150px; */
  overflow-y: auto;
  overflow-x: hidden;
  height: 270px;
}

li {
  height: 40px;
  font-size: 14px;
}

.head {
  height: 40px;
  background-color: #c1d2e7;
  line-height: 40px;
  padding-left: 20px;
  margin-bottom: 5px;
}



.all {
  -webkit-appearance: none;
  background-color: #e2edf2;
  height: 14px;
  width: 14px;
  border-radius: 5px;
}

.someChecked[type="checkbox"] {
  background-color: #3caaa1;
}

.someChecked[type="checkbox"]:checked {
  background-color: #00809f;
}
.head div{
  display: inline-flex;
  justify-content: space-between;
  width: 80px;
}

.head div .num{
  font-size: 12px;
}
</style>